<template>
	<view class="coinDetail">
		<HeaderBar title="详情" showBack fixed ref="header" />
		<view class="contentBox">
			<view class="coinBox">
				<view class="coin_icon">
					<image
						:src="'/static/images/tokenicon/' +conInfo.tokenaddress+conInfo.chainType+conInfo.chainId+'.png'"
						mode="widthFix" class="icon" @error="imageError(conInfo)" v-if="!conInfo.err"></image>
					<image src="/static/images/notoken.png" mode="widthFix" class="icon" v-show="conInfo.err"></image>
				</view>
				<view class="right">
					<view class="coindes">
						<view class="name">
							{{conInfo.tokensymbol}}
						</view>
						<view class="address" v-if="conInfo.tokenaddress != $config.defaultAddress"
							@click="copy(conInfo.tokenaddress)">
							{{$utils.formatAddress(conInfo.tokenaddress)}}
						</view>
					</view>
					<view class="detail" @tap="webView">
						项目详情
						<text>></text>
					</view>
				</view>
			</view>
			<view class="balanceBox">
				<view class="text">
					资产余额
				</view>
				<view class="balance">
					<view class="usdt">
						{{$utils.toTwoDecimalDown(conInfo.tokennum,4)}}
					</view>
					<view class="cny">
						${{$utils.toTwoDecimalDown(conInfo.tokennum * conInfo.tokenprice)}}
					</view>
				</view>
			</view>

			<view class="marketPrice">
				<view class="leftText">
					市场价格
				</view>
				<view class="right_cell">
					<view class="pricBox">
						<view class="usdt">
							{{conInfo.tokenprice}}U
						</view>
						<!-- <view class="cny">
							$0
						</view> -->
					</view>
					<!-- 	<view class="trend">
						<text>-0.56%</text>
					</view> -->
					<!-- <view class="right_icon">
						<text class="iconfont icon-youjiantou"></text>
					</view> -->
				</view>
			</view>

			<view class="scroll">
				<view class="scroll_title" :style="{top:headerHeight+'px'}">
					<view class="title_nav">
						<view class="nav ">
							交易记录
						</view>
						<!--<view class="nav " :class="{act:type==1}" @tap="tab(1)">
							全部
						</view>
						 <view class="nav" :class="{act:type==2}" @tap="tab(2)">
							转入
						</view>
						<view class="nav" :class="{act:type==3}" @tap="tab(3)">
							转出
						</view> -->
					</view>
					<!-- <view class="right">
						<view class="search">
							<image src="/static/images/home/search.png" mode="widthFix" class="icon"></image>
							<view class="text">
								搜索交易
							</view>
						</view>
						<view class="filter">
							<image src="/static/images/home/filter.png" mode="widthFix" class="icon"></image>
						</view>
					</view> -->
				</view>

				<scroll-view scroll-y="true" @scrolltolower="getdata" class="scroll-Y">
					<view class="scroll-view-item" v-for="(item,index) in newList" @tap='transactionDetails(item)'>
						<view class="itemBox" v-if="item.otheraddress">
							<view class="item_icon">
								<image src="/static/images/home/trandout.png" mode="widthFix" class="icon"
									v-if="item.type=='-'"></image>
								<image src="/static/images/home/trandin.png" mode="widthFix" class="icon" v-else>
								</image>
							</view>
							<view class="right">
								<view class="coindes">
									<view class="address">
										<text>{{$utils.formatAddress(item.otheraddress)}}</text>
										<image src="/static/images/home/copy.png" mode="widthFix" class="copy"
											@tap.stop="copy(item.otheraddress)">
										</image>
									</view>
									<view class="time">
										{{item.time}}
									</view>
								</view>
								<view class="number out">
									{{item.type}}{{$utils.toTwoDecimalDown(item.num)}}
									<text>{{conInfo.tokensymbol}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<zanwei v-if="newList.length==0" type="2" style="margin-top: 40upx;"></zanwei>
			</view>

			<view class="btn_grounp">
				<view class="btn transfer" @tap="transfer">
					转账
				</view>
				<view class="btn first" @tap="addqrcode">
					收款
				</view>
				<!-- <view class="btn exchange">
					<image src="/static/images/home/trand.png" class="icon" mode=""></image>
					闪兑
				</view> -->
			</view>
		</view>


	</view>
</template>

<script>
	import {
		getTxlist
	} from '../../http/api.js';
	export default {
		data() {
			return {
				conInfo: {},
				list: [],
				headerHeight: "0",
				page: 1,
				type: 1,
			}
		},
		computed: {
			newList() {
				if (this.type == 1) {
					return this.list
				}
				if (this.type == 2) {
					return this.list.filter(item => item.type == '+')
				}
				if (this.type == 3) {
					return this.list.filter(item => item.type == '-')
				}
			},
			addressInfo() {
				return this.$store.getters.addressInfo
			},
			chainInfo() {
				return this.$store.getters.chainInfo
			},
		},
		onLoad(options) {
			const conInfoStr = options.conInfoStr || '';
			try {
				// 解码并反序列化 JSON 字符串
				const conInfo = JSON.parse(decodeURIComponent(conInfoStr));
				this.conInfo = conInfo

			} catch (error) {}

		},
		mounted() {
			this.headerHeight = this.$refs.header.height;
			this.getList()
		},
		methods: {
			imageError(item) {
				this.$set(item, 'err', true);
			},
			webView() {
				if (this.conInfo.tokenaddress == this.$config.defaultAddress) {
					uni.navigateTo({
						url: `/pages/webView/webView?title=区块浏览器&url=${this.chainInfo.browser}`
					})
				} else {
					if (this.chainInfo.chainType == 'ETH') {
						uni.navigateTo({
							url: `/pages/webView/webView?title=区块浏览器&url=${this.chainInfo.browser}/address/${this.conInfo.tokenaddress}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/webView/webView?title=区块浏览器&url=${this.chainInfo.browser}#/token20/${this.conInfo.tokenaddress}`
						})
					}

				}

			},
			transfer() {
				const conInfoStr = encodeURIComponent(JSON.stringify(this.conInfo));
				if (this.addressInfo.importMethod != 4) {
					uni.navigateTo({
						url: `/pages/transfer/transfer?token=${conInfoStr}`
					})
				} else {
					uni.showToast({
						title: "观察钱包没有操作权限",
						position: "bottom",
						icon: 'none'
					});
				}
			},
			addqrcode() {
				if (this.addressInfo.importMethod != 4) {
					uni.navigateTo({
						url: `/pages/addressQRcode/addressQRcode`
					})
				} else {
					uni.showToast({
						title: "观察钱包没有操作权限",
						position: "bottom",
						icon: 'none'
					});
				}

			},
			tab(type) {
				this.type = type
			},
			getdata() {
				this.page++;
				this.getList()
			},
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				let param = {
					chaintype: this.conInfo.chainType,
					chainid: this.conInfo.chainId,
					address: this.conInfo.address,
					tokens: this.conInfo.tokenaddress,
					page: this.page,
				}
				getTxlist(param).then((res) => {
					uni.hideLoading()
					if (res.code == 200) {
						if (this.page == 1) {
							this.list = res.data
						} else {
							for (var i = 0; i < res.data.length; i++) {
								this.list.push(res.data[i])
							}
						}
					}
				}).catch((err) => {
					uni.hideLoading()
				})
			},
			transactionDetails(item) {
				const infoStr = encodeURIComponent(JSON.stringify(item));
				const conInfoStr = encodeURIComponent(JSON.stringify(this.conInfo));
				uni.navigateTo({
					url: `/pages/transactionDetails/transactionDetails?infoStr=${infoStr}&conInfoStr=${conInfoStr}`
				})
			},
			copy(address) {
				uni.setClipboardData({
					data: address,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none',
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
						});
					},
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "/static/iconfont/iconfont.css";

	.coinDetail {
		font-weight: 400;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;

		.contentBox {
			flex: 1;
			display: flex;
			flex-direction: column;

			/* 确保它位于其他元素之上 */
			.coinBox {
				display: flex;
				margin-left: 44upx;
				padding-right: 44upx;
				padding-top: 18upx;
				padding-bottom: 18upx;
				border-bottom: 1upx solid #D8D8D8;
				color: #A2A2A2;

				.coin_icon {
					display: flex;
					margin-right: 24upx;

					.icon {
						width: 82upx;
						height: 82upx;
						border-radius: 50%;
					}
				}

				.right {
					display: flex;
					flex: 1;
					justify-content: space-between;
					align-items: center;

					.name {
						font-size: 36upx;
						color: #3D3D3D;
					}

					.address {
						font-size: 24upx;
					}

					.detail {
						font-size: 28upx;
					}
				}
			}

			.balanceBox {
				display: flex;
				justify-content: space-between;
				color: #3D3D3D;
				font-size: 28upx;
				margin-left: 44upx;
				padding-right: 44upx;
				align-items: center;
				height: 118upx;

				.balance {
					text-align: right;

					.cny {
						color: #A2A2A2;
					}
				}
			}
		}

		.marketPrice {
			border-top: 24upx solid #EFEFEF;
			border-bottom: 24upx solid #EFEFEF;
			display: flex;
			color: #3D3D3D;
			justify-content: space-between;
			align-items: center;
			padding: 0 44upx;
			height: 144upx;

			.leftText {
				font-size: 28upx;
			}

			.right_cell {
				display: flex;
				align-items: center;

				.pricBox {
					text-align: right;

					.usdt {
						font-size: 28upx;
					}

					.cny {
						color: #A2A2A2;
						font-size: 24upx;
					}
				}

				.trend {
					height: 50upx;
					min-width: 116upx;
					background: #E46357;
					color: #FFFFFF;
					font-size: 20upx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 10upx;
					margin-left: 50upx;
					margin-right: 18upx;
				}

				.right_icon {
					display: flex;
					color: #A2A2A2;
				}
			}
		}

		.scroll {
			flex: 1;
			display: flex;
			flex-direction: column;

			.scroll_title {
				display: flex;
				justify-content: space-between;
				padding: 20upx 32upx;
				border-bottom: 1upx solid #D8D8D8;
				position: -webkit-sticky;
				/* Safari */
				position: sticky;
				background-color: #fff;
				z-index: 99;
				/* 确保它位于其他元素之上 */

				.title_nav {
					font-size: 32upx;
					color: #A2A2A2;
					display: flex;

					.nav {
						margin-right: 36upx;
					}

					.act {
						color: #3D3D3D;
					}
				}

				.right {
					display: flex;

					.search {
						display: flex;
						background: #F5F6F8;
						margin-right: 20upx;
						align-items: center;
						min-width: 134upx;
						height: 46upx;
						border-radius: 23upx;
						padding-left: 10upx;
						padding-right: 20upx;
						box-sizing: border-box;

						.text {
							font-size: 24upx;
							color: #A2A2A2;
							margin-left: 6upx;
						}

						.icon {
							width: 32upx;
							height: 32upx;
						}
					}

					.filter {
						display: flex;
						justify-content: center;
						align-items: center;

						.icon {
							width: 46upx;
							height: 46upx;
						}
					}
				}
			}

			.scroll-Y {
				width: 100%;
				max-height: 100vh;
				padding-left: 32upx;
				box-sizing: border-box;
				padding-bottom: 136upx;

				.scroll-view-item {

					.itemBox {
						display: flex;
						height: 120upx;
						align-items: center;
						border-bottom: 1upx solid #D8D8D8;

						.item_icon {
							.icon {
								width: 68upx;
								height: 68upx;
							}
						}

						.right {
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-left: 22upx;
							padding-right: 46upx;

							.address {
								display: flex;
								align-items: center;
								font-size: 26upx;

								.copy {
									width: 38upx;
									height: 38upx;
									margin-left: 12upx;
								}
							}

							.time {
								color: #A2A2A2;
								font-size: 24upx;
							}

							.number {
								font-size: 26upx;
							}

							.out {
								color: #52C8A0;
							}
						}
					}
				}
			}
		}

		.btn_grounp {
			position: fixed;
			width: 100%;
			z-index: 100;
			box-sizing: border-box;
			left: 0;
			bottom: 0;
			padding: 28upx 34upx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 56upx;
			border-top: 1upx solid #D8D8D8;
			background: #FFFFFF;

			.btn {
				height: 78upx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
				font-size: 36upx;
				border-radius: 10upx;

				.icon {
					width: 32upx;
					height: 32upx;
					margin-right: 8upx;
				}
			}

			.transfer {
				background: #50C79F;
			}

			.first {
				background: #2A7FFC;
			}

			.exchange {
				border: 1upx solid #979797;
				color: #3D3D3D;
			}
		}

	}
</style>